<template>
  <div>
    <el-card v-if="tokenInfo">
      <div slot="header" class="clearfix">
        <el-button style="float: right; padding: 3px 0" type="text" @click="showModal">修改密码</el-button>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="5">
          <img :src="tokenInfo.userInfo.avatar" style="width:100%;">
        </el-col>
        <el-col :span="15">
          <el-card :bordered="false">
            <p slot="header">{{ tokenInfo.userInfo.name }}</p>
            <table style="width:100%;">
              <tr>
                <td>
                  <svg-icon icon-class="user" />
                </td>
                <td>{{ tokenInfo.userInfo.agentId }}</td>
              </tr>
              <tr>
                <td>
                  <svg-icon icon-class="lock" />
                </td>
                <td>{{ tokenInfo.token }}</td>
              </tr>
              <tr>
                <td>
                  <svg-icon icon-class="time" />
                </td>
                <td>{{ tokenInfo.createTime }}</td>
              </tr>
            </table>
          </el-card>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <table style="width:100%;">
            <tr>
              <td>
                <svg-icon icon-class="user" />
              </td>
              <td>{{ tokenInfo.userInfo.name }}({{ tokenInfo.userInfo.agentId }})</td>
            </tr>
            <tr>
              <td>
                <svg-icon icon-class="email" />
              </td>
              <td>{{ tokenInfo.userInfo.email }}</td>
            </tr>
            <tr>
              <td>
                <svg-icon icon-class="phone" />
              </td>
              <td>{{ tokenInfo.userInfo.phoneNo }}</td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog title="修改密码" :visible.sync="changeAuthModal" :close-on-click-modal="false">
      <el-form ref="changeAuthForm" :model="authFormData" :rules="formRules" label-width="80px">
        <el-form-item label="原密码" prop="agentAuth">
          <el-input
            v-model="authFormData.agentAuth"
            :type="authFormInputType.type"
            placeholder="请输入原密码"
            :suffix-icon="authFormInputType.icon"
            @on-click="changeInputType"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newAuth">
          <el-input
            v-model="authFormData.newAuth"
            :type="authFormInputType.type"
            placeholder="请输入原密码"
            :suffix-icon="authFormInputType.icon"
            @on-click="changeInputType"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="danger" size="large" long :loading="changeAuthModalLoading" @click="changeAuth">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTokenInfo } from '@/api/admin/token';
import { changeAuth } from '@/api/admin/user';
import md5 from 'md5';
import { mapActions } from 'vuex';
import rules from '@/utils/rules.js';

export default {
  data() {
    return {
      tokenInfo: null,
      changeAuthModalLoading: false,
      changeAuthModal: false,
      formRules: {
        agentAuth: [
          { required: true, message: '原密码不能为空！', trigger: 'blur' }
        ],
        newAuth: [
          { required: true, validator: rules.validatePassword, trigger: 'blur' }
        ]
      },
      authFormData: {
        agentAuth: null,
        newAuth: null
      },
      authFormInputType: {
        type: 'password',
        icon: 'md-eye'
      }
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      this.initInfo();
    });
  },
  methods: {
    ...mapActions([
      'LogOut'
    ]),
    initInfo() {
      getTokenInfo().then(response => {
        const result = response.data;
        if (result.code === 0) {
          this.tokenInfo = result.data;
        } else {
          this.$Notice.error({
            title: result.code,
            desc: result.msg
          });
        }
      });
    },
    changeInputType() {
      if (this.authFormInputType.type === 'password') {
        this.authFormInputType.type = 'text';
        this.authFormInputType.icon = 'md-eye-off';
      } else {
        this.authFormInputType.type = 'password';
        this.authFormInputType.icon = 'view';
      }
    },
    showModal() {
      this.$nextTick(() => {
        this.$refs.changeAuthForm.resetFields();
      });
      this.changeAuthModal = true;
    },
    changeAuth() {
      this.$refs.changeAuthForm.validate((valid) => {
        if (valid) {
          this.$confirm('将会修改密码, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const params = {};
            params.agentAuth = md5(this.authFormData.agentAuth);
            params.newAuth = md5(this.authFormData.newAuth);
            changeAuth(params).then(response => {
              const result = response.data;
              if (result.code === 0) {
                this.$notify({
                  title: '修改成功',
                  message: '即将退出系统，请重新登录!',
                  type: 'success'
                });
                setTimeout(() => {
                  this.LogOut().then(() => {
                    this.$router.push({
                      name: 'login'
                    });
                  });
                }, 1000);
              } else {
                this.$notify.error({
                  title: result.code,
                  message: result.msg
                });
              }
              this.changeAuthModal = false;
              this.$refs.changeAuthForm.resetFields();
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      });
    }
  }
};
</script>
